<template>
  <div>
    <td-title :title="title"></td-title>
    <td-form @dispatch="dispatch"></td-form>
    <td-list :todoData="todoData" @dispatch="dispatch"></td-list>
  </div>
</template>

<script>
import TdTitle from "./TdTitle.vue";
import TdForm from "./TdForm.vue";
import TdList from "./TdList/index.vue";

import dispatch from "../../dispatchers/todoList";

export default {
  name: "TodoList",
  components: {
    TdTitle,
    TdForm,
    TdList,
  },
  data() {
    return {
      title: "Todo List",
      todoData: [],
    };
  },
  methods: {
    dispatch(...args) {
      // console.log(...args);
      //ADD {id: 1637677388038, text: '123123', completed: false}

      // console.log(this);
      //VueComponent{...}

      // console.log("TodoList:", ...args);
      //TodoList: ADD {id: 1637679651319, text: '123', completed: false}
      //TodoList: COMPLETED 1637679675791

      dispatch(this)(...args);
    },
  },
};
</script>